<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 村级管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="title" clearable placeholder="名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
				<el-button type="success" icon="el-icon-lx-add" @click="dialogToggle">添加村级</el-button>
				<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectionChange">
                <el-table-column type="selection" width="80" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="150" align="center"></el-table-column>
                <el-table-column prop="title" label="名称"></el-table-column>
				<el-table-column prop="addr" label="地址"></el-table-column>
				<el-table-column label="启用状态" align="center">
				    <template slot-scope="scope">
						<el-select v-model="scope.row.status" style="width: 80px" @change="changeStatus(scope.row.id)">
						    <el-option
								v-for="item in $status"
								:key="item.value"
								:label="item.label"
								:value="item.value">
						    </el-option>
						</el-select>
				    </template>
				</el-table-column>
                <el-table-column prop="addtime" label="添加时间"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" class="mr10" @click="editTable(scope.row.id)">编辑</el-button>
						<el-popconfirm
							confirm-button-text='确定'
							cancel-button-text='取消'
							icon="el-icon-info"
							icon-color="red"
							@confirm="delRow(scope.row.id)"
							title="确定删除该信息？"
						>
							<el-button slot="reference" type="text" icon="el-icon-delete" :id="'del' + scope.row.id" class="red">删除</el-button>
						</el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="pageIndex"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="pagination"
                ></el-pagination>
            </div>
        </div>
		
		<vHamlet ref="vHamlet" @dialogToggle="dialogToggle" @getData="getData"></vHamlet>
    </div>
</template>

<script>
import vHamlet from '../vPage/vHamlet.vue'
export default {
	name: 'Hamlet',
	components: {
		vHamlet,
	},
    data() {
        return {
            title: '',
			mTitle: '',
			tableData: [],
            mData: [],
			delIds: [],
			pageIndex: 1,
			pageSize: 10,
			pageTotal: 0,
        };
    },
    created() {
		this.getData()
    },
    methods: {
        getData() {
			let params = {title: this.title, pageIndex: this.pageIndex, pageSize: this.pageSize}
			this.$apiPost('Hamlet/lists', params).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
        },
		dialogToggle () {
			this.$refs.vHamlet.dialog = !this.$refs.vHamlet.dialog
		},
        changeStatus (id, field = '') {
			this.$updateStatus('Index/updateStatus', {model: 'Hamlet', id: id, field: field});
		},
		handleQuery () {
			this.pageIndex = 1
			this.getData()
		},
		editTable (id) {
			this.$apiPost('Hamlet/infos', {id: id}).then(res => {
				if(res.code == 1) {
					this.$refs.vHamlet.formData = res.data
					this.dialogToggle()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		delRow (id) {
			this.$apiPost('Hamlet/delOne', {id: id}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getData()
					this.$message(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		selectionChange(e){
			let ids = []
			if(e.length > 0) {
				for(let i in e){
					ids.push(e[i].id)
				}
				this.delIds = ids
			} else {
				this.delIds = e
			}
		},
		delAll () {
			if(this.delIds.length == 0) {
				return this.$message({
					message: '未选择删除信息!',
					type: 'warning'
				})
			}
			this.$confirm('是否删除选择的?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$apiPost('Hamlet/delAll', {ids: this.delIds}).then(res => {
					if(res.code == 1) {
						this.pageIndex = 1
						this.getData()
						this.$message(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {         
			})
			
		},
		pagination (e) {
			this.pageIndex = e
			this.getData()
		}
    }
};
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 200px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
